<template>
  <el-container class="container">
    <el-aside class="aside" width="240px">
      <ul>
        <li :class="{'active': item.module === module}"  v-for="(item,index) in leftMenu" :key="index" @click="sendMenu(item)">
          {{item.title}}
        </li>
      </ul>
      <Corner></Corner>
    </el-aside>
    <el-container v-loading="loading" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading"
                  element-loading-background="rgba(0, 0, 0, 0.8)" style="margin-left: 2%;">
      <el-header style="padding: 0px;">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item v-if="module !== 'one'">
            <el-cascader :key="module" ref="cascader" @change="cascaderChange" :options="queryData" :props="props"
                         :show-all-levels="false" clearable />
          </el-form-item>
          <el-form-item>
            <el-input v-model="queryForm.name" placeholder="请输入名称" clearable/>
          </el-form-item>
       <!--   <el-form-item>
            <el-select v-model="queryForm.registrant" placeholder="请选择登记人员" filterable clearable>
              <el-option :key="i"  v-for="(item, i) in userData" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>-->
          <el-form-item>
            <el-button type="primary" class="header-btn" @click="search">查询</el-button>
            <el-button type="primary" class="header-btn" @click="add" v-if="addBtn">新增</el-button>
          </el-form-item>
        </el-form>
      </el-header>
      <el-main style="padding: 0px;">
        <el-table border stripe :data="tableData" :max-height="635">
          <el-table-column prop="name" show-overflow-tooltip label="名称" align="center" />
          <el-table-column v-if="module !== 'one'" prop="oneName" show-overflow-tooltip label="保存库名称" align="center" />
          <el-table-column v-if="module === 'three' || module === 'four'" prop="twoName" show-overflow-tooltip label="保存区名称" align="center" />
          <el-table-column v-if="module === 'four'" prop="threeName" show-overflow-tooltip label="树种分区" align="center" />
          <el-table-column v-if="module === 'one'" prop="type" show-overflow-tooltip label="类型" align="center" />
          <el-table-column v-if="module === 'one'" prop="location" show-overflow-tooltip label="地点" align="center" />
          <el-table-column v-if="module !== 'four'" prop="acreage" show-overflow-tooltip label="面积（亩）" align="center" />
          <el-table-column prop="saveCopies" show-overflow-tooltip label="保存份数" align="center" />
          <el-table-column prop="backupsCopies" show-overflow-tooltip label="备份份数" align="center" />
          <el-table-column prop="repetitionCopies" show-overflow-tooltip label="重复份数" align="center" />
          <el-table-column prop="savePlant" show-overflow-tooltip label="保存植株份数" align="center" />
          <el-table-column prop="backupsPlant" show-overflow-tooltip label="备份植株份数" align="center" />
          <el-table-column prop="repetitionPlant" show-overflow-tooltip label="重复植株份数" align="center" />
          <el-table-column :key="module" fixed="right" label="操作" align="center" width="200">
            <template slot-scope="scope">
              <span class="pointer" @click="read(scope.row)">查看</span>
              <span v-if="updateBtn" class="pointer" @click="update(scope.row)"><i class="line"></i>修改</span>
              <span v-if="deleteBtn" class="pointer" @click="remove(scope.row)"><i class="line"></i>删除</span>
            </template>
          </el-table-column>
        </el-table>
        <div class="paging">
          <el-pagination :page-sizes="[10,20,50]" :page-size="this.pageSize" :current-page="pageIndex"
                         :total="totalCount" @current-change="pager"  @size-change="handleSizeChange"
                         background layout="total, sizes, prev, pager, next, jumper" />
        </div>
      </el-main>
    </el-container>
    <el-dialog :title="formTitle" :visible.sync="formVisible" :before-close="cancel" :close-on-click-modal="false">
      <el-form :model="dataForm">
        <div class="form-table_col4">
          <table>
            <tr>
              <td class="form-item_label">名称</td>
              <td>
                <el-input v-model="dataForm.name" :disabled="disabled" />
              </td>
              <td>创建时间</td>
              <td>
                <el-date-picker v-model="dataForm.newTime" type="date" value-format="yyyy-MM-dd" :disabled="disabled" />
              </td>
            </tr>
            <tr>
              <td>面积（亩）</td>
              <td>
                <el-input v-model="dataForm.acreage" :disabled="disabled" />
              </td>
              <td>坐标</td>
              <td>
                <div class="td3-box">
                  <LonLat ref="lonRef" @child-event="lonEvent" class="coordinate-type" v-if ="isReady" placeholder="经度" :msg-val="chilLon" :disabled="disabled" />
                  <LonLat ref="latRef" @child-event="latEvent" class="coordinate-type" v-if ="isReady" placeholder="纬度" :msg-val="chilLat" :disabled="disabled" />
                  <el-input v-model="dataForm.alt" class="coordinate-type" placeholder="海拔" :disabled="disabled"/>
                </div>
                <!-- <el-input v-model="dataForm.lon" placeholder="经度" class="coordinate" :disabled="disabled" />
                <span>-</span>
                <el-input v-model="dataForm.lat" placeholder="纬度" class="coordinate" :disabled="disabled" />
                <span>-</span>
                <el-input v-model="dataForm.alt" placeholder="海拔" class="coordinate" :disabled="disabled" /> -->
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td class="form-item_label">类型</td>
              <td>
                <el-select filterable v-model="dataForm.type" :disabled="disabled">
                  <el-option v-for="(item, i) in typeData" :key="i" :label="item" :value="item" />
                </el-select>
              </td>
              <td>地点</td>
              <td>
                <el-input v-model="dataForm.location" :disabled="disabled"/>
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>土壤类型</td>
              <td>
                <el-select v-model="dataForm.soilType" multiple filterable allow-create clearable default-first-option :disabled="disabled">
                  <el-option v-for="(item, i) in soilData" :key="i" :label="item" :value="item" />
                </el-select>
              </td>
              <td>立地条件</td>
              <td>
                <el-input v-model="dataForm.condition" :disabled="disabled" />
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>种质类型</td>
              <td>
                <el-select v-model="dataForm.germplamType" multiple filterable allow-create clearable default-first-option :disabled="disabled">
                  <el-option v-for="(item, i) in germplamData" :key="i" :label="item" :value="item" />
                </el-select>
              </td>
              <td>种质生活型</td>
              <td>
                <el-select v-model="dataForm.livingForm" multiple filterable allow-create clearable default-first-option :disabled="disabled">
                  <el-option v-for="(item, i) in liveData" :key="i"  :label="item" :value="item" />
                </el-select>
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>主要用途</td>
              <td colspan="3">
                <el-select v-model="dataForm.purpose" multiple filterable allow-create clearable default-first-option :disabled="disabled">
                  <el-option v-for="(item, i) in purposeData" :key="i" :label="item" :value="item"/>
                </el-select>
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>建设单位</td>
              <td>
                <SelectTree :options="departmentData" :value="dataForm.constr" :clearable="true" :accordion="false"
                            @getValue="getConstr($event)" :disabled="disabled"/>
              </td>
              <td>单位地址</td>
              <td>
                <el-input v-model="dataForm.constrAddress" disabled />
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>建设单位负责人</td>
              <td>
                <el-input v-model="dataForm.constrPrincipal" disabled />
              </td>
              <td>负责人电话</td>
              <td>
                <el-input v-model="dataForm.constrPhone" disabled />
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>主管单位</td>
              <td>
                <SelectTree :options="departmentData" :value="dataForm.competent" :clearable="true" :accordion="false"
                            @getValue="getCompetent($event)" :disabled="disabled"/>
              </td>
              <td>单位地址</td>
              <td>
                <el-input v-model="dataForm.competentAddress" disabled />
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>技术支撑单位</td>
              <td>
                <SelectTree :options="departmentData" :value="dataForm.technical" :clearable="true" :accordion="false"
                            @getValue="getTechnical($event)" :disabled="disabled"/>
              </td>
              <td>单位地址</td>
              <td>
                <el-input v-model="dataForm.technicalAddress" disabled />
              </td>
            </tr>
            <tr v-if="module === 'one'">
              <td>技术支撑单位负责人</td>
              <td>
                <el-input v-model="dataForm.technicalPrincipal" disabled />
              </td>
              <td>负责人电话</td>
              <td>
                <el-input v-model="dataForm.technicalPhone" disabled />
              </td>
            </tr>
            <tr v-if="module === 'two'">
              <td class="form-item_label" v-if="dataForm.parentId !== 'default'">保存库</td>
              <td v-if="dataForm.parentId === 'default'">保存库</td>
              <td colspan="3">
                <el-select filterable v-model="dataForm.oneId" @change="selectedOne"
                           :disabled="disabled || dataForm.parentId === 'default'" clearable>
                  <el-option v-for="(item, i) in oneData" :key="i" :label="item.name" :value="item.id"/>
                </el-select>
              </td>
            </tr>
            <tr v-if="module === 'three' || module === 'four' ">
              <td class="form-item_label">保存库</td>
              <td>
                <el-select filterable v-model="dataForm.oneId" @change="selectedOne" clearable :disabled="disabled">
                  <el-option v-for="(item, i) in oneData" :key="i" :label="item.name" :value="item.id" />
                </el-select>
              </td>
              <td class="form-item_label">保存区</td>
              <td>
                <el-select filterable v-model="dataForm.twoId" @change="selectedTwo" clearable :disabled="disabled">
                  <el-option v-for="(item, i) in twoData" :key="i" :label="item.name" :value="item.id" />
                </el-select>
              </td>
            </tr>
            <tr v-if="module === 'four'">
              <td class="form-item_label">树种分区</td>
              <td>
                <el-select filterable v-model="dataForm.threeId" @change="selectedThree" clearable :disabled="disabled">
                  <el-option v-for="(item, i) in threeData" :key="i" :label="item.name" :value="item.id" />
                </el-select>
              </td>
              <td>土壤类型</td>
              <td>
                <el-select v-model="dataForm.agrotype" filterable allow-create clearable default-first-option :disabled="disabled">
                  <el-option v-for="(item, i) in soilData" :key="i" :label="item" :value="item" />
                </el-select>
              </td>
            </tr>
            <tr v-if="module === 'four'">
              <td>坡位</td>
              <td>
                <el-input v-model="dataForm.slope" :disabled="disabled"/>
              </td>
              <td>坡向</td>
              <td>
                <el-input v-model="dataForm.aspect" :disabled="disabled"/>
              </td>
            </tr>
            <tr v-if="module === 'four'">
              <td>坡度</td>
              <td colspan="3">
                <el-input v-model="dataForm.gradient" :disabled="disabled"/>
              </td>
            </tr>
            <tr>
              <td>登记日期</td>
              <td>
                <el-date-picker disabled type="date" v-model="dataForm.recordDate" value-format="yyyy-MM-dd" :disabled="disabled"/>
              </td>
              <td>登记人员</td>
              <td>
                <el-input v-model="dataForm.registrant" disabled />
              </td>
            </tr>
            <tr>
              <td>排序</td>
              <td colspan="3">
                <el-input-number class="input" v-model="dataForm.sortNo" :min="1" />
              </td>
            </tr>
            <tr>
              <td style="display:table-cell;vertical-align: middle">备注</td>
              <td colspan="3">
                <el-input type="textarea" v-model="dataForm.remark" :disabled="disabled"/>
              </td>
            </tr>
          </table>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button v-if="formEdit !== 'read'" type="primary" @click="save" class="dialog-btn">保 存</el-button>
        <el-button type="primary" @click="cancel" class="dialog-btn">关 闭</el-button>
      </div>
    </el-dialog>
  </el-container>
</template>

<script>
import Corner from '../../../components/corner'
import SelectTree from '@/components/TreeSelect'
import systemApi from '../../../api/systemApi'
import ResourceManageApi from '../../../api/ResourceManageApi'
import LonLat from '../../../components/LatLon'
export default {
  name: 'manage',
  components: {
    Corner, SelectTree,LonLat
  },
  data () {
    return {
      leftMenu: [
        {module: 'one', title: '保存库', queryModule: []},
        {module: 'two', title: '保存区', queryModule: ['one']},
        {module: 'three', title: '树种分区', queryModule: ['one', 'two']},
        {module: 'four', title: '小区', queryModule: ['one', 'two', 'three']}
      ],
      module: 'one',
      oneData: [],
      twoData: [],
      threeData: [],
      userData: [],
      departmentData: [],
      queryForm: {},
      queryData: [],
      pageIndex: 1,
      pageSize: 10,
      totalCount: 0,
      tableData: [],
      loading: false,
      dataForm: {},
      formTitle: null,
      formEdit: null,
      formVisible: false,
      typeData: ['主库', '副库', '其他库'],
      soilData: ['砖红壤', '赤红壤', '红壤', '黄壤', '黄棕壤', '棕壤', '暗棕壤', '寒棕壤', '褐土', '黑钙土', '栗钙土', '棕钙土', '黑垆土', '荒漠土', '草甸土', '漠土'],
      germplamData: ['群体', '家系', '个体', '地方品种', '选育品种', '育种材料'],
      liveData: ['常绿针叶乔木', '落叶针叶乔木', '常绿阔叶乔木', '落叶阔叶乔木', '落叶灌木'],
      purposeData: ['用材', '生态', '经济林木', '木本花卉', '藤本植物'],
      props: {
        value: 'id',
        emitPath: false,
        checkStrictly: true
      },
      queryModule: [],
      disabled: false,
      title: '保存库',
      addBtn: false,
      updateBtn: false,
      deleteBtn: false,
      chilLon:'',
      chilLat:'',
      isReady:false
    }
  },
  created () {
    this.initBtn()
    // this.findUser()
    this.findPage()
    this.findDepartment()
  },
  methods: {
    //经度
    lonEvent(val){
      this.dataForm.lon = val;
    },

    latEvent(val){
      this.dataForm.lat = val;
    },
    sendMenu (data) {
      this.pageIndex = 1
      this.queryForm = {}
      this.module = data.module
      this.queryModule = data.queryModule
      this.title = data.title
      this.getTree()
      this.findPage()
    },
    findUser () {
      systemApi.getUserList().then((res) => {
        if (res.data.message === 'success') {
          this.userData = res.data.result
        } else {
          this.userData = []
        }
      })
    },
    findDepartment () {
      systemApi.getDeparmentList().then((res) => {
        if (res.data.message === 'success') {
          this.departmentData = res.data.result
        } else {
          this.departmentData = []
        }
      })
    },
    pager (val) {
      this.pageIndex = val
      this.findPage()
    },
    search() {
      this.pageIndex = 1;
      this.findPage();
    },
    findPage () {
      let params = {
        module: this.module,
        name: this.queryForm.name,
        oneId: this.queryForm.oneId,
        twoId: this.queryForm.twoId,
        threeId: this.queryForm.threeId,
        registrant: this.queryForm.registrant,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize,
        sort: 'sortNo',
        order: 'ASC'
      }
      this.loading = true
      ResourceManageApi.findResourceManagePage(params).then(res => {
        this.loading = false
        let result = res.data.result
        if (res.data.message === 'success' && result) {
          this.tableData = result.rows
          this.totalCount = result.totalCount
        } else {
          this.tableData = []
          this.totalCount = 0
        }
      })
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.findPage()
    },
    add () {
      if (this.module !== 'one') {
        this.getOne()
      }
      let date = this.getNowDate()
      this.formEdit = 'add'
      this.formTitle = '新增' + this.title
      this.$set(this.dataForm, 'sortNo', 0)
      this.$set(this.dataForm, 'newTime', date)
      this.$set(this.dataForm, 'recordDate', date)
      let user = JSON.parse(localStorage.getItem('user'))
      this.$set(this.dataForm, 'registrant', user.userName)
      this.formVisible = true
      this.isReady = true
    },
    update (row) {
      this.formEdit = 'edit'
      this.formTitle = '修改' + this.title
      this.getInfo(row)
    },
    remove(row) {
      let tips = ''
      if (row) {
        tips = `此操作将删除: ${row.name}, 是否继续?`
      } else {
        return
      }
      this.$confirm(tips, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.showLoading();
        ResourceManageApi.remove(row.id).then(res => {
          this.hideLoading();
          if (res.data.message === 'success') {
            this.findPage();
            this.$notify({
              title: '消息',
              message: ('删除成功！'),
              position: 'bottom-right',
              showClose: false,
              type: 'success'
            })
          }
        });
      })
    },
    read (row) {
      this.disabled = true
      this.formEdit = 'read'
      this.formTitle = '查看' + this.title
      this.getInfo(row)
    },
    async getInfo (row) {
      if (this.module !== 'one') {
        this.getOne()
      }

      if (row.oneId) {
        this.getChildren(row.oneId).then(res => {
          this.twoData = res
        })
      }

      if (row.twoId) {
        this.getChildren(row.twoId).then(res => {
          this.threeData = res
        })
      }

      if (row.threeId) {
        this.getChildren(row.threeId).then(res => {
          this.fourData = res
        })
      }
      const res = await ResourceManageApi.getResourceManageInfo(row.id)
      if (res.data.message === 'success') {
        this.formVisible = true
        this.dataForm = res.data.result
        console.log(this.dataForm,'住');
        this.isReady = true
        this.chilLon = this.dataForm.lon;
        this.chilLat = this.dataForm.lat;

      }
    },
    async save () {
      if (this.validation()) {
        this.showLoading()
        let params = Object.assign({}, this.dataForm)
        params.module = this.module
        params.soilType = params.soilType ? params.soilType.join(',') : null
        params.germplamType = params.germplamType ? params.germplamType.join(',') : null
        params.livingForm = params.livingForm ? params.livingForm.join(',') : null
        params.purpose = params.purpose ? params.purpose.join(',') : null
        let result = await ResourceManageApi.saveResourceManage(params)
        this.hideLoading()

        if (result.data.message === 'success') {
          this.queryForm = {}
          this.pageIndex = 1
          this.findPage()
          this.cancel()
          this.$notify({
            title: '消息',
            message: ('保存成功！'),
            position: 'bottom-right',
            showClose: false,
            type: 'success'
          })
        } else {
          this.$notify.error({
            title: '消息',
            message: '保存失败'
          })
        }
      }
    },
    validation () {
      let flag = true
      let message = null
      if (this.dataForm.name) {
        if (this.module === 'one' && !this.dataForm.type) {
          flag = false
          message = '请选择类型'
        }

        if (flag && this.module !== 'one') {
          if (!this.dataForm.oneId && this.dataForm.parentId !== 'default') {
            flag = false
            message = '请选择保存库'
          } else if (!this.dataForm.twoId) {
            if (this.module === 'three' || this.module === 'four') {
              flag = false
              message = '请选择保存区'
            }
          } else if (this.module === 'four' && !this.dataForm.threeId) {
            flag = false
            message = '请选择隶属大类'
          }
        }
      } else {
        flag = false
        message = '请输入名称'
      }

      if (!flag) {
        this.$message({
          message: message,
          type: 'warning'
        })
        return false
      }
      return true
    },
    cancel () {
      this.oneData = []
      this.twoData = []
      this.threeData = []
      this.dataForm = {}
      this.disabled = false
      this.formVisible = false
      this.isReady = false;
      this.$refs.lonRef.initData();
      this.$refs.latRef.initData();
    },
    getOne () {
      this.getModule('one').then(res => {
        this.oneData = res
      })
    },
    async getModule (module) {
      let result = []
      let res = await ResourceManageApi.getModule(module)
      if (res.data.message === 'success') {
        result = res.data.result
      }
      return result
    },
    async getChildren (data) {
      let result = [];
      let res = await ResourceManageApi.getChildren(data);
      if (res.data.message === 'success') {
        result = res.data.result
      }
      return result;
    },
    selectedOne (data) {
      this.twoData = [];
      this.threeData = [];
      this.$set(this.dataForm, 'twoId', null);
      this.$set(this.dataForm, 'threeId', null);
      this.$set(this.dataForm, 'parentId', null);

      if (data) {
        if (this.module === 'two') {
          this.dataForm.parentId = data;
        } else {
          this.getChildren(data).then(res => {
            this.twoData = res;
          })
        }
      }
    },
    selectedTwo (data) {
      this.threeData = [];
      this.$set(this.dataForm, 'threeId', null);
      this.$set(this.dataForm, 'parentId', null);
      if (data) {
        if (this.module === 'three') {
          this.dataForm.parentId = data;
        } else {
          this.getChildren(data).then(res => {
            this.threeData = res;
          })
        }
      }
    },
    selectedThree (data) {
      this.dataForm.parentId = data;
    },
    getConstr (value) {
      this.dataForm.constr = value
      this.setInfo(value, 'constr')
    },
    getCompetent (value) {
      this.dataForm.competent = value
      this.setInfo(value, 'competent')
    },
    getTechnical (value) {
      this.dataForm.technical = value
      this.setInfo(value, 'technical')
    },
    async setInfo (param, key) {
      let result = {}
      if (param) {
        let res = await systemApi.getDepartmentInfo(param)
        if (res.data.message === 'success') {
          result = res.data.result
        }
      }

      let address = result ? result.address : null
      let principal = result ? result.principal : null
      let principalPhone = result ? result.principalPhone : null

      if (key === 'constr') {
        this.$set(this.dataForm, 'constrAddress', address)
        this.$set(this.dataForm, 'constrPrincipal', principal)
        this.$set(this.dataForm, 'constrPhone', principalPhone)
      } else if (key === 'competent') {
        this.$set(this.dataForm, 'competentAddress', address)
      } else if (key === 'technical') {
        this.$set(this.dataForm, 'technicalAddress', address)
        this.$set(this.dataForm, 'technicalPrincipal', principal)
        this.$set(this.dataForm, 'technicalPhone', principalPhone)
      }
    },
    showLoading () {
      this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
    },
    hideLoading () {
      this.$loading().close()
    },
    getNowDate () {
      let now = new Date()
      let year = now.getFullYear()
      let month = (now.getMonth() + 1).toString().padStart(2, '0')
      let day = now.getDate().toString().padStart(2, '0')
      return year + '-' + month + '-' + day
    },
    getTree () {
      if (this.module !== 'one') {
        this.queryData = []
        ResourceManageApi.getTree(this.queryModule).then(res => {
          if (res.data.message === 'success') {
            this.queryData = res.data.result
          }
        })
      }
    },
    cascaderChange (data) {
      this.queryForm.oneId = null;
      this.queryForm.twoId = null;
      this.queryForm.threeId = null;
      if (data) {
        let node = this.$refs.cascader.getCheckedNodes(data);
        let module = node[0].data.module;
        if (module === 'one') {
          this.queryForm.oneId = data;
        } else if (module === 'two') {
          this.queryForm.twoId = data;
        } else if (module === 'three') {
          this.queryForm.threeId = data;
        }
      }
    },
    initBtn () {
      let permissionBtn = JSON.parse(localStorage.permissionBtn)
      this.addBtn = permissionBtn['resource_manage_add']
      this.updateBtn = permissionBtn['resource_manage_update']
      this.deleteBtn = permissionBtn['resource_manage_delete']
    }
  }
}
</script>
<style lang="less" scoped>
  .container {
    color: #ffffff;
    height: calc(100vh - 190px);
    max-height: calc(100vh - 190px);

    .aside {
      box-sizing: border-box;
      color: #FFFFFF;
      background: rgba(24, 32, 45, 0.2);
      display: flex;
      justify-content: center;
      border:1px solid rgba(0,245,255,0.5);
      position: relative;
      ul{
        margin-top: 9%;
        width: 80%;
      }
      li {
        cursor: pointer;
        font-size: 2rem;
        text-align: left;
        padding: 15px 15%;
        margin-bottom: 15px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;

        &.active {
          box-shadow: inset 0 0 15px rgba(0, 245, 255, 1);
        }
      }
    }
  }
  .header-btn {
    border-radius: 3px;
    height: 42px;
  }

  .upload:hover {
    background: rgba(0, 0, 0, 0) url(../../../assets/img/btn.png) no-repeat scroll 50% 50% / cover;
    border: 1px solid #00ffff;
  }
  .coordinate {
    width: 25%;
  }
  .dialog-btn {
    font-size: 1.6rem;

    &:hover {
      background: rgba(12, 161, 151, 1);
    }
  }
  /deep/ .el-tree-node__content {
    height: 40px;
  }
  /deep/.el-tree-node__expand-icon {
    font-size: 16px;
  }
  /deep/.el-tree-node__label {
    font-size: 18px;
    letter-spacing: 3px;
  }
  /deep/.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    box-shadow: inset 0 0 15px #00f5ff;
  }
  .el-aside {
    overflow: hidden;
  }
  .td3-box {
  display: flex;
  justify-content: space-between;
  line-height: 45px;
  margin-left: 5px;
  margin-right: 5px;
}
.coordinate-type{
  width: 25%;
}
</style>
